<template>
	<view class="bookmark">
		<view class="nav-header-title">
			<view class="nav-title">
				收藏
			</view>
		</view>
		<view class="search-box">
			<text class="search-left-icon"></text>
			<input class="search" type="text" v-model="searchVal" placeholder="请输入要搜索的内容" />
			<text class="search-right-icon" @click="getSearchNewsList">搜索</text>
		</view>
		<view class="section-list">
			<view v-if="bookmarkList.length == 0" class="search-null">
				<view class="search-null-header">
					<view class="null-right">暂时没有收藏的新闻</view>
				</view>
			</view>
			<view v-else class="ul-list">
				<block v-for="item in bookmarkList" :key="item.news_id">
					<view class="li-list" v-if="item.news_media!=null" @click="goDetail(item.news_id)">
						<view class="left-img">
							<image v-if="/.*thepaper.*/gi.test(item.news_img)"
								:src="`https://images.weserv.nl/?url=${item.news_img}`" mode="aspectFill"></image>
							<image v-else :src="`${item.news_img}`" mode="aspectFill"></image>
						</view>
						<view class="content-writing">
							<view class="p-location">{{item.news_tag}}</view>
							<view class="p-title">{{item.news_title}}</view>
							<view class="p-come">
								<view class="p-come-left">
									<view class="p-person">
										<view class="person-icon">
											<image :src="item.user_avators" mode="aspectFit"></image>
										</view>
										<text class="person">{{item.news_media}}</text>
									</view>
									<view class="p-time">{{item.news_time}}</view>
								</view>
								<view class="p-come-right">
									<!-- <text class="come-right-icon"></text> -->
								</view>
							</view>
						</view>
					</view>
				</block>
			</view>
		</view>
	</view>
</template>

<script>
	import { getBookmarkList } from "@/api/request"
	export default {
		data() {
			return {
				searchVal: "",
				bookmarkList: [],
				user_id:""
			}
		},
		methods:{
			//去详情页
			goDetail(id) {
				// console.log(id);
				uni.navigateTo({
					url: "/pages/detail/detail?id=" + id
				})
			},
			
			//去搜索页
			goSearch() {
				uni.navigateTo({
					url: "/pages/search/search"
				})
			},
			//获取用户收藏列表
			getUserBookmarkList(){
				let data={
					user_id:this.user_id
				};
				getBookmarkList(data).then(content=>{
					// console.log(content);
					let { code,data } =content;
					if(code==200){
						this.bookmarkList = data
						// console.log(this.bookmarkList);
					}
				})
			}
		},
		onLoad(){
		},
		onShow(){
			this.user_id = localStorage.getItem("user_id")
			this.getUserBookmarkList();
		},
		created(){
			// this.getUserBookmarkList();
		}
	}
</script>

<style lang="scss" scoped>
	.bookmark {
		position: relative;
		width: 100%;
		// padding: 0 $uni-box-padding;
	}

	.nav-header-title {
		z-index: 1;
		position: fixed;
		top: 0;
		left: 0;
		padding: 30rpx 30rpx;
		width: 100%;
		background-color: #fff;

		.nav-title {
			font-size: 48rpx;
			font-weight: bold;
			color: #000;
		}
	}

	.search-box {
		position: relative;
		width: 100%;
		padding: 124rpx 30rpx 0;

		.search {
			height: 96rpx;
			padding: 20rpx 64rpx 20rpx 74rpx;
			// box-sizing: border-box;s
			border: 1px solid #A0A3BD;
			border-radius: 14rpx;
			font-size: 24rpx;
		}

		.search-left-icon,
		.search-right-icon {
			display: block;
			width: 48rpx;
			height: 48rpx;
			// background-color: #000;
			transform: translateY(-50%);
			position: absolute;
			top: 78%;
			background-repeat: no-repeat;
			background-size: 100%;
		}

		.search-left-icon {
			background-image: url("@/static/image/search.png");
			left: 40rpx;
		}

		.search-right-icon {
			// background-image: url("@/static/image/set.png");
			text-align: center;
			line-height: 48rpx;
			width: 70rpx;
			font-size: 28rpx;
			right: 40rpx;

		}
	}

	.section-list {
		// border: 1px solid #000;
		// margin-top: 30rpx;
		width: 100%;
		// height: 500rpx;
		padding: 20rpx 30rpx 10rpx;

		.search-null {
			// border: 1px solid #000;
			width: 100%;
			text-align: center;

			.search-null-header {
				display: flex;
				align-items: center;
			}

			.null-left {
				border-radius: 10rpx;
				width: 6rpx;
				height: 25rpx;
				background-color: #1877F2;
			}

			.null-right {
				width: 100%;
				text-align: center;
				font-size: 28rpx;
				padding-left: 10rpx;
				color: #000;
			}

			.want-search-text {
				padding: 15rpx 0;
			}
		}

		.li-list {
			display: flex;
			align-items: center;
			margin-bottom: 30rpx;

			.left-img {
				width: 192rpx;
				height: 192rpx;

				image {
					border-radius: 10rpx;
					width: 100%;
					height: 100%;
				}
			}

			.content-writing {
				// width: 100%;
				flex: 1;
				padding: 0 10rpx;

				.p-location {
					font-size: 28rpx;
					color: $uni-text-color-grey;
				}

				.p-title {
					padding: 15rpx 0 10rpx 0;
					font-size: 32rpx;
					color: #000;
					height: 106rpx;
					overflow: hidden;
					// text-overflow: ellipsis;
					-webkit-line-clamp: 2;
					-webkit-box-orient: vertical;
					display: -webkit-box;
				}

				.p-come {
					width: 100%;
					display: flex;
					align-items: center;
					justify-content: space-between;
				}

				.p-come-left {
					display: flex;
					align-items: flex-end;
				}

				.p-person {
					display: flex;
					align-items: center;
					margin-right: 20rpx;
				}


				.person-icon {
					display: block;
					width: 40rpx;
					height: 40rpx;
					// background-color: #000;
					border-radius: 50%;
					margin-right: 5rpx;

					image {
						border: 1px solid #f0f0f0;
						border-radius: 50%;
						width: 100%;
						height: 100%;
					}
				}

				.person {
					padding-left: 5rpx;
					font-size: 28rpx;
					color: #4e4b46;
					font-weight: bold;
				}

				.p-time {
					padding-left: 10rpx;
					font-size: 20rpx;
					color: $uni-text-color-grey;
				}

				.p-come-right {
					width: 40rpx;
					height: 40rpx;
					// background-color: #000;
					background-image: url("@/static/image/more.png");
					background-repeat: no-repeat;
					background-size: 100%;
				}
			}
		}
	}
</style>